<template>
    <div>
        <div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.fieldA"
                        placeholder="题干"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Select v-model="params.fieldB" placeholder="班级" style="width:100px" clearable>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <div class="f-fr">
                <Button type="primary" @click="handleAdd">新建事件</Button>
            </div>
        </div>
        <div class="emer">
            <div class="emer--item" v-for="item in 10" :key="item">
                <div class="emer--type">系统触发</div>
                <div class="emer--text">{{item }}. 报关单被退回改怎么办？</div>
                <div class="emer--footer">
                    <span>触发对象：20人</span>
                    <span>已作答：6人</span>
                    <span>已批阅：3人</span>
                    <Button type="primary" size="small">批阅</Button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                fieldA: ''
            }
        }
    },
    methods: {
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {},
        clearSearch () {},
        handleAdd () {}
    }
}
</script>
<style lang="less" scoped>
@border-color: #eee;
.emer {
    &--item {
        padding: 10px 20px;
        border: 1px solid @border-color;
    }
    &--item + &--item {
        margin-top: 20px;
    }
    &--type {
        text-align: right;
    }
    &--text {
        font-size: 14px;
        margin-bottom: 10px;
    }
    &--footer {
        text-align: right;
        span {
            margin-right: 30px;
        }
    }
}
</style>
